<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表过渡</title>
    <style>
        .fade-enter{
            transform: scale(0);
            opacity: 1;
        }
        .fade-enter-active{
            transition: 1s;
        }
        .num-list{
            list-style: none;
        }
        .num-list li{
            float: left;
            border:1px solid red;
            margin:0 5px;
        }
        .insert-enter,
        .insert-leave-to{
            transform: translateY(50px);
            opacity: 0;
        }
        .insert-enter-to,
        .insert-leave{

        }
        .insert-enter-active{
            transition: 1s;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" v-model="todo">
        <button @click="add">添加</button>
        <ul>
            <transition-group name="fade">
                <li v-for="(item,index) in todoList" :key="item+index">{{item}}</li>
            </transition-group>
        </ul>
        <hr>
        <input type="text" v-model="num">
        <button @click="addNum">添加</button>
        <ul class="num-list">
            <transition-group name="insert">
                <li v-for="(item,index) in numList" :key="item">{{item}}</li>
            </transition-group>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                todo: '',
                num:'',
                todoList: ['吃饭', '打游戏'],
                numList:[1,2,3,4]
            },
            methods: {
                add() {
                    this.todoList.push(this.todo)
                },
                addNum(){
                    let randNum = Math.floor(Math.random()*(this.numList.length))
                    this.numList.splice(randNum,0,this.num)
                }
            }
        })
    </script>
</body>

10  21 32 43
10  21 32 13 44
10  21 32 13 254  45

</html>